<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item >数据挖掘</el-breadcrumb-item>
        <el-breadcrumb-item >需求预测分析模型</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div style="display: flex;flex-direction: column;">
      <div>
        <span>需求类型：</span>
        <el-select v-model="value" placeholder="请选择" size="small" @change="getData">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div
        style="display: flex;margin-top: 20px;"
         v-loading="loading"
      >

        <div style="flex: 1;height: 500px;" ref="main"></div>

        <div style="width: 300px;margin-left: 20px;">
          <el-table
            :data="tableData"
            border
            height="450"
            style="width: 100%;">
            <el-table-column
              prop="saleTime"
              :label="this.tableList[0]">
            </el-table-column>
            <el-table-column
              prop="amount"
              :label="this.tableList[1]">
            </el-table-column>
            <el-table-column
              prop="increaseRate"
              :label="this.tableList[2]">
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import echarts from "echarts"
  import DemandApi from '@/api/demand'
  import OrderApi from '@/api/orderApi'
  export default {
    data() {
      return {
        // 加载
        loading:false,
        options: [{
          value: '销售额',
          label: '销售额'
        }, {
          value: '订单',
          label: '订单'
        }, {
          value: '红参原料',
          label: '红参原料'
        }, {
          value: '麦冬原料',
          label: '麦冬原料'
        }],
        value: '销售额',
        tableData: [],
        // 分页
        pageInfo:{
          // pageNo:1,
          pageSize:100000,
          currentPage: 1,
          count:0
        },
        timeList:[],
        saleList:[],
        increateRate:[],
        // 表title
        legendList:[],
        // table表动态
        tableList:[]
      }
    },
    created() {
      this.getSellData()
    },
    mounted() {
     this.initChart()
    },
    methods:{
      // 获取销售额
      getSellData(){
        this.loading = true
        this.tableData = []
        this.timeList = []
        this.saleList = []
        this.increateRate = []
        this.legendList = ['销售额（万元）', '增长率（%）']
        this.tableList = ['时间','销售额（万元）','增长率（%）']

        DemandApi.SaleList(this.pageInfo).then(res => {
          if(res.data.status === "200"){
            this.tableData = []
            res.data.data.records.map(val => {
              this.timeList.push(val.saleTime)
              this.saleList.push(val.amount)
              this.increateRate.push(val.increaseRate)


              var obj = {
                saleTime:'',
                amount:'',
                increaseRate:''
              }
              obj.saleTime = val.saleTime
              obj.amount = val.amount
              obj.increaseRate = val.increaseRate

              this.tableData.push(obj)
            })
            this.initChart()
            this.loading = false
          }

        })
      },
      // 获取订单
      getOrderData(){
        this.tableData = []
        this.timeList = []
        this.saleList = []
        this.increateRate = []
        this.legendList = ['数量(个)','增长率（%）']
        this.tableList = ['时间','数量（个）','增长率（%）']

        this.loading = true
        OrderApi.OrderList(this.pageInfo).then(res => {
          if(res.data.status === "200"){
             res.data.data.records.map(val => {
               this.timeList.push(val.orderTime)
               this.saleList.push(val.orderQuantity)
               this.increateRate.push(val.increaseRate)

               var obj = {
                 saleTime:'',
                 amount:'',
                 increaseRate:''
               }
               obj.saleTime = val.orderTime
               obj.amount = val.orderQuantity
               obj.increaseRate = val.increaseRate

               this.tableData.push(obj)
             })
             this.initChart()
             this.loading = false
          }
        })
      },
      // 获取原料
      getMaterialData(res){
        this.tableData = []
        this.timeList = []
        this.saleList = []
        this.increateRate = []
        this.legendList = ['数量(个)','增长率（%）']
        this.tableList = ['时间','数量（个）','增长率（%）']
        this.loading = true
        DemandApi.materialList(this.pageInfo,res).then(res => {
          if(res.data.status === "200"){
             res.data.data.records.map(val => {
               this.timeList.push(val.materialTime)
               this.saleList.push(val.quantity)
               this.increateRate.push(val.increaseRate)
          
               var obj = {
                 saleTime:'',
                 amount:'',
                 increaseRate:''
               }
               obj.saleTime = val.materialTime
               obj.amount = val.quantity
               obj.increaseRate = val.increaseRate
          
               this.tableData.push(obj)
             })
             this.initChart()
             this.loading = false
          }
        })
      },
      //获取订单
      getData(res){
        if(res === "订单"){
          this.getOrderData()
        }else if(res === "销售额"){
          this.getSellData()
        }else{
          this.getMaterialData(res)
        }
      },


      initChart(){
        let myChart = this.$echarts.init(this.$refs.main);
        var option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    crossStyle: {
                        color: '#999'
                    }
                }
            },
            toolbox: {
                feature: {
                    dataView: {show: true, readOnly: false},
                    magicType: {show: true, type: ['line', 'bar']},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            legend: {
                data: this.legendList
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.timeList,
                    axisPointer: {
                        type: 'shadow'
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: this.legendList[0],
                    axisLabel: {
                        // formatter: '{value} 亿'
                        formatter: '{value} '
                    }
                },
                {
                    type: 'value',
                    name: this.legendList[1],
                    axisLabel: {
                        formatter: '{value} %'
                    }
                }
            ],
            series: [
                {
                    name: this.legendList[0],
                    type: 'bar',
                    data: this.saleList
                },
                {
                    name: this.legendList[1],
                    type: 'line',
                    yAxisIndex: 1,
                    data: this.increateRate
                }
            ]
        };

          myChart.setOption(option);
      }
    }
  }
</script>

<style>
</style>
